<!--
    SliderCell.vue
    gree_ctm

    Created by 汪明 on 18:12.
 -->
<template>
    <view class="SliderCell">
        <scroll-view class="content-view"
                     :scroll-x="true"
                     :show-scrollbar="false"
                     :scroll-with-animation="true"
                     :scroll-into-view="'tab'+ scrollIntoView">
            <view :id="'tab' + index" class="item_view" @click="buttonEvent(index)" v-for="(item,index) in items"
                  :key="index">
                <view class="title_view" :style="{color: index == selectIndex ? '#ff4d4f' : ''}">{{ item.floorName }}</view>
                <view class="sub_title_view" :style="{color: index == selectIndex ? '#ff4d4f' : ''}">{{
                    item.floorTitle
                    }}
                </view>
                <view class="slider_view" v-show="index == selectIndex"></view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
import {ref} from "vue";


const props = defineProps<{
    items: {
        floorName:string,
        floorTitle:string,
        id:number
    }[],
    selectIndex:number
}>()
const emit = defineEmits<{
    (e:"update:selectIndex",value:number):void
}>()
const scrollIntoView = ref(0)
const buttonEvent = (index: number) => {
    scrollIntoView.value = index
    emit("update:selectIndex",index)
}


</script>

<style scoped lang="scss">

.SliderCell {
  box-sizing: border-box;
  margin: 12px 12px 0px 0px;
  padding-top: 12px;
  padding-bottom: 12px;

  .content-view {
    &::-webkit-scrollbar {
      display: none;
    }

    :deep(.uni-scroll-view) {
      scrollbar-width: none;
    }
    -ms-overflow-style: none;
    width: 100%;
    white-space: nowrap;
    padding: 0px 0px;

    .item_view {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;

      .title_view {
        color: #333333;
        font-size: 16px;
        font-weight: 700;
      }

      .sub_title_view {
        padding-top: 5px;
        color: #999999;
        font-size: 12px;
        font-weight: 400;
      }

      .slider_view {
        margin-top: 5px;
        background-color: red;
        height: 2px;
        border-radius: 1px;
        width: 30px;
      }
    }
  }
}
</style>
